<template>
  <div class="head">
    <el-row :gutter="30">
      <el-col :span="1" class="quit">
        <i class="el-icon-s-unfold" @click="handleQuit" style="opacity: 0"></i>
      </el-col>
      <el-col :span="4">
        <dv-border-box-10 class="btn"
          ><div @click="handleModule(1)" :style="showModel == 1 && selectTitle">
            可视化数据展示
          </div></dv-border-box-10
        >
      </el-col>
      <el-col :span="4">
        <dv-border-box-10 class="btn"
          ><div @click="handleModule(2)" :style="showModel == 2 && selectTitle">
            列表查询
          </div></dv-border-box-10
        >
      </el-col>
      <el-col :span="6" class="topic">杭州TRKJ</el-col>
      <el-col :span="4">
        <dv-border-box-10 class="btn">dv-border-box-10</dv-border-box-10>
      </el-col>
      <el-col :span="4">
        <dv-border-box-10 class="btn">dv-border-box-10</dv-border-box-10>
      </el-col>
      <el-col :span="1" class="quit">
        <i class="el-icon-s-unfold" @click="handleQuit"></i>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    showModel: {
      type: Number
    }
  },
  data () {
    return {
      selectTitle: { color: '#00ffff', fontSize: '2.5vh' }
    }
  },
  methods: {
    handleQuit () {
      this.$router.push('/home')
    },
    handleModule (num) {
      console.log(num)
      this.$emit('changeShowModel', num)
    }
  }
}
</script>

<style lang="scss" scoped>
$primary-color: #409eec;
.head {
  background-color: #282c34;
  height: 10vh;
  padding: 1vh;
  padding-right: 1vh;
  color: #fff;
  .btn {
    margin: 1vh;
    height: 6vh;
    width: 100%;
    line-height: 6vh;
    text-align: center;
    cursor: pointer;
    div {
      width: 100%;
      height: 100%;
    }
  }
  .topic {
    line-height: 8vh;
    font-size: 4vh;
    text-align: center;
    color: $primary-color;
  }
  .quit {
    line-height: 8vh;
    font-size: 4vh;
    cursor: pointer;
    color: $primary-color;
  }
}
</style>
